<template>
    <div class="main-content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="query" ref="query" slot="form" label-width="85px" :label-position="labelPosition">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="所属省" prop="provinceId">
                            <province v-model="query.provinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属市" prop="cityId">
                            <city v-model="query.cityId" :province="query.provinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属区" prop="areaId">
                            <region v-model="query.areaId" :city="query.cityId"></region>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="经销商名称" prop="agentName">
                            <el-input v-model="query.agentName" placeholder="请输入经销商名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="月份" prop="month">
                            <el-date-picker v-model="query.month" type="month" placeholder="选择月" style="width:100%"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="searchData">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
            </div>
            <el-table :data="tableData" border v-loading="loading" style="width: 100%">
                <el-table-column label="经销商名称" align="center">
                    <template scope="scope">
                        <span>{{scope.row.fOrgUserName | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="商品名称" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sServiceName | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="购买数量（条）" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sCardCouponsNum | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="订单销售额（元）" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sOrderMoney | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="申请时间" width="170" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sCreateTime | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="发放时间" width="170" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.sOpenTime | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="订单号" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.sOrderNum | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="100px">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="goToCheck(scope.row)">查看明细</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" 
                :current-page.sync="pageQuery.page" :page-sizes="config.pageSizes" :page-size="config.pageSize" 
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import moment from 'moment';
import Levelbar from '../../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import {pageIncrementCardCoupons} from 'api/cardCoupons';
import { mapState, mapActions } from 'vuex';

export default {
    name: 'cardDetailList',
    components: { Levelbar, TableLayout, province, city, region },
    data() {
        return { 
            labelPosition: 'right', // 标签左对齐
            loading: true,  
            tableData: [], // 卡券订单列表
            pageQuery: {
                page: 1,
                total: 0
            },
            query: { // 查询数据
                provinceId: '',
                cityId: '',
                areaId: '',
                agentName: '',
                month: ''
            }
        }
    },
    created() {
        this.getCardList();
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        })
    },
    filters: {
        dateFilter(val) {
            if (val) {
                return val.substring(0, val.length)
            } else {
                return '--';
            }            
        }
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSizeChange(val) {
            this.pageQuery.page = 1;
            this.ChangePageSize(val);
            this.getCardList();
        },
        handleCurrentChange(val) {
            this.pageQuery.page = val;
            this.getCardList();
        },
            // 点击查询按钮
        searchData() {
            this.pageQuery.page = 1;
            this.getCardList();
        },
        getCardList() {
            this.tableData= [];
            this.loading = true;
            let monthTemp = this.query.month==''?'':moment(this.query.month).format('YYYY-MM');
            pageIncrementCardCoupons(
                    this.pageQuery.page, 
                    this.config.pageSize,
                    this.query.provinceId,
                    this.query.cityId,
                    this.query.areaId,
                    this.query.agentName,
                    monthTemp).then(response => {
                        this.tableData = response.data.content.list;
                        this.pageQuery.total = response.data.content.pagination.total;
                        this.loading = false;
                    });
        },
            // 点击“查看明细”跳转页面
        goToCheck(row) {
            this.$router.push({ 
                path: `detailsCheck/${row.pId}/${row.sCardType}/${row.sServiceName}` 
            });
        }

    }

}
</script>

<style lang="scss" scoped>

</style>

